<template>
  <div 
    class="chart_box">
    <div class="header_box">
      <Header :isSimMainWin="false" />
    </div>
    
    <div
      id="box_id"
      ref="chartBox"
      class="_box" />
    
  </div>
</template>
<script lang="ts" setup>
import { ipcRenderer } from "electron";
import { onMounted, computed } from 'vue';
import { controller } from "@/engine/Controller";
import { SimFrameToSubChannel, SimSubwinMsgToSimWin } from "@/engine/types/Win";
import { TimelineUpdateData } from "@/engine/types/charts";
import Header from '@/components/Header.vue';

onMounted(async () => {
  await controller.chartsService.init();

  ipcRenderer.on(SimFrameToSubChannel.TimelineStatusUpdate, (event: Event, data: TimelineUpdateData) => {
    controller.chartsService.timeLineService.statusTimeLineUpdate(data);
  });

  ipcRenderer.on(SimFrameToSubChannel.TimelineActivityUpdate, (event: Event, data: TimelineUpdateData) => {
    controller.chartsService.timeLineService.activityTimeLineUpdate(data);
  });

  // end position
  controller.winService.simSubWinSendInfoToSimWin({ type: SimSubwinMsgToSimWin.SubMounted });
});
</script>

<style lang="scss" scoped>
.chart_box {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  .header_box {
    position: fixed;
    width: 100%;
    z-index: 1;
  }
  ._box {
    height: 100%;
    width: 100%;
    margin-top: 30px;
  }
}
</style>
